<template>
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="过滤选项:">
            <el-checkbox v-model="emailData.option" value="1" label="不显示已读" size="small" />
            <el-checkbox v-model="emailData.option" value="2" label="不显示未读" size="small" />
            <el-checkbox v-model="emailData.option" value="3" label="不显示系统邮件" size="small" />
            <el-checkbox v-model="emailData.option" value="4" label="不显示发送" size="small" />
            <el-checkbox v-model="emailData.option" value="5" label="不显示接收" size="small" />
        </el-form-item>
        <el-form-item label="只看用户:">
            <el-select v-model="emailData.onlyShow" filterable placeholder="选择指定用户" style="width: 240px">
                <el-option :key="-1" label="查看全部用户" value="" />
                <el-option v-for="item in FriendData.getOptionList" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="搜索邮件:">
            <el-input v-model="emailData.search" style="width: 200px" placeholder="请输入邮件相关信息" suffix-icon="Search" />
        </el-form-item>
        <el-form-item label="邮件操作:">
            <el-button type="primary" @click="emailData.setAllRead()">已读筛选邮件</el-button>
            <el-button type="warning">删除筛选邮件</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import useEmail from "@/store/email.js"
import useFriend from "@/store/friend.js"
let emailData = useEmail();
let FriendData = useFriend();
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
